<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>ESA-Wetter :: Benutzerverwaltung</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
        <link href="/WeatherAppFrontend/resources/css/main.css" rel="stylesheet" />

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
        <script src="//maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
        <script src="/WeatherAppFrontend/resources/js/usermanagement.js"></script>
        <script>
            $(document).ready(init);
        </script>
    </h:head>
    <h:body>
        <div class="container">
            <div class="page-header">
                <h1>Administration <small>Benutzerverwaltung</small></h1>
            </div>
            <ul class="breadcrumb">
                <li><a href="/WeatherAppFrontend/faces/users/index.xhtml">Home</a> <span class="divider">/</span></li>
                <li class="active">Benutzerverwaltung</li>
            </ul>
            <table id="usertable" class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th>Benutzername</th>
                        <th>Email</th>
                        <th>Rolle</th>
                        <th width="120"></th>
                        <th width="110"></th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <a href="#addUserModal" role="button" id="addButton" class="btn btn-success" data-toggle="modal"><i class="icon-plus-sign icon-white"></i> Hinzufügen</a>
            
            <div id="addUserModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">Benutzer hinzufügen</h3>
                </div>
                <div class="modal-body">
                    <form>
                        <fieldset>
                            <label for="uName">Benutzername</label>
                            <input id="iUName" name="uName" type="text" placeholder=""></input>

                            <label for="uPassword">Passwort</label>
                            <input id="iUPassword" name="uPassword" type="password" placeholder=""></input>

                            <label for="uMail">E-Mail</label>
                            <input id="iUMail" name="uMail" type="text" placeholder=""></input>

                            <label for="uRole">Rolle</label>
                            <select id="iUSelect">
                                <option>USER</option>
                                <option>ADMIN</option>
                            </select>
                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Schließen</button>
                    <button id="saveButton" class="btn btn-primary">Speichern</button>
                </div>
            </div>
        </div>
    </h:body>
</html>